<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/pages/repairDetails.css" />
	</head>

	<body>
		<div id="mescroll" class="mescroll">
			<div id="app" class="content">
				<div class="title">
					<span class="font-c-41 font-16">保修类型：</span>
					<span class="font-16 font-c-min" v-text="details.repType"></span>
				</div>
				<!-- 报事内容详情 -->
				<div class="repair-details">
					<div class="desc" v-text="details.repDetails"></div>
					<div class="image-list" v-if="details.repairsImgList.length>0">
						<div class="img" v-for="(item,index) in details.repairsImgList" @click="lookImgTap(details.repairsImgList,index)">
							<img :src="item.filesPath">
						</div>
					</div>
					<div class="record-list" v-if="details.repairsVoiceList.length>0">
						<div class="item" v-for="(item,index) in details.repairsVoiceList" @click="playAudio(item.filesPath)">
							<img src="../../../images/home/repairs/bofang.png">
							<span>语音 - {{index+1}}</span>
						</div>
					</div>
				</div>
				<!-- 用户资料 -->
				<div class="user-data">
					<div class="item">
						<span class="font-c-7f">住址</span>
						<span v-text="details.repDoorNumber"></span>
					</div>
					<div class="item">
						<span class="font-c-7f">联系人</span>
						<span v-text="details.repContactPerson"></span>
					</div>
					<div class="item">
						<span class="font-c-7f">联系电话</span>
						<span v-text="details.repPhoneNumber"></span>
					</div>
				</div>
				<!-- 完成进度 -->
				<div class="progress">
					<div class="title">维修处理进度</div>
					<div class="list">
						<div class="item" v-for="item in details.repairsLogList">
							<div class="item-sate">
								<span class="icon"></span>
								<span class="font-12 font-c-7f" v-text="item.replCD"></span>
							</div>
							<div class="item-desc font-c-41" v-text="item.replDetails"></div>
						</div>

					</div>
				</div>

				<div class="mrk-record" v-if="record">
					<div class="record">
						<img class="record-img" src="../../../images/home/repairs/luyin-f.png" />
						<span class="record-span">播放中...</span>
					</div>
				</div>
			</div>
		</div>
		<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/mescroll.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init()
			var ws
			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				ws = plus.webview.currentWebview();
				GetRepDetails(ws.repID)
			})
			var app = new Vue({
				el: "#app",
				data: {
					record: false,
					details: {},
					filename: ''
				},
				methods: {
					playAudio: function(text) {
						if (!text) {
							mui.toast('无效的音频文件');
							return;
						}
						var that = this;
						if (mui.os.ios) {
							if (that.filename == '') {
								var dtask = plus.downloader.createDownload(text, {}, function(d, status) {
									// 下载完成
									if (status == 200) {
										console.log(d.filename)
										that.filename = d.filename
										startPlay(that.filename)
									} else {
										mui.alert("Download failed: " + status);
									}
								});
								dtask.start(that.filename);
							} else {
								startPlay(that.filename)
							}
						} else {
							startPlay(text);
						}
					},
					lookImgTap: function(lists, index) {
						var list = []
						lists.forEach(function(item, num) {
							list.push(item.filesPath)
						})
						plus.nativeUI.previewImage(list, {
							current: index
						})
					}
				},
			})

			var mescroll = new MeScroll("mescroll", {
				down: {
					auto: false,
					callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
			})

			function downCallback() {
				mui.toast('刷新成功')
				GetRepDetails(ws.repID)
			}

			function GetRepDetails(repID) {
				mui.post(Util.HTTP + 'api/Repairs/GetRepDetails', {
					repID: repID
				}, function(res) {
					if (res.code == 1001) {
						mescroll.endSuccess(); //无参
						app.details = res.data
					} else {
						mui.toast(res.message)
						mescroll.endErr();
					}
				})
			}



			function startPlay(url) {
				var p = null
				app.record = true;
				p = plus.audio.createPlayer(url);
				p.play(function() {
					app.record = false
					mui.toast('播放完成！');
					// 播放完成
				}, function(e) {
					app.record = false
					mui.alert('失败：' + e.message);
				});
			}
		</script>
	</body>

</html>
